<template>
    <div>
        <div class="jian">
            <h1 class="h">京海强盛集团房地产后台管理系统</h1>
        </div>
        <el-container>
            <el-aside width="200px" class="bgc">

                <el-menu default-active="2" class="el-menu-vertical-demo" background-color="tomato" text-color="#fff"
                    active-text-color="#fff" unique-opened router>
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home" style="color: #fff"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <el-submenu :index="item.id + ''" v-for="item in menus" :key="item.id">
                        <template slot="title">
                            <i class="el-icon-setting" style="color: #fff"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item :index="val.url" v-for="val in item.children" :key="val.id">{{ val.title }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>


            <el-container>
                <el-header style="height: 0;">
                    <el-dropdown class="fr">
                        <span class="el-dropdown-link">
                            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- 包一个盒子添加点击事件 -->
                            <div @click="logout">
                                <el-dropdown-item>安全退出</el-dropdown-item>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>


<script>
export default {
    data() {
        return {
            username: "",
            menus: []
        }
    },
    mounted() {
        let info = JSON.parse(sessionStorage.getItem("admininfo") || "{}")
        this.username = info.username
        this.menus = info.menus
    },
    methods: {
        logout() {
            // 清除缓存
            sessionStorage.removeItem("admininfo")
            // 返回登录页面
            this.$router.push("/login")
        }
    }
}

</script>


<style leng='less' scoped>
.jian{
    
}
.el-header{
    /* display: none; */
    height: 0px;
}
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;

}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    min-height: 100vh;
}

.el-main {
    background-color: #E9EEF3;
    color: #ccc;
    text-align: center;

}

body>.el-container {
    margin-bottom: 40px;
}

.wtimg {
    margin-top: 20px;
    width: 140px;
    margin-bottom: 15px;
}

.bgc {
    background-color: #FF6C53;
}

.fr {
    /* float: right; */
    position: absolute;
    top: 50px;
    left: 40px;
    color: #fff;
    font-size: 20px;
    /* line-height: 60px; */
}

.is-active {
    background: rgba(0, 0, 0, .2) !important;
}
.h{
    height: 100px;
    padding-left: 30px;
    background-color: #518ECB;
}
</style>